<template>
  <div>
    <breadc-rumb>
      <div slot="breadc-button">
        <buttom-url src="/" size="btn-medium">{{ $t("about.title") }}</buttom-url>
      </div>
    </breadc-rumb>
    <div class="container">
      <div class="contact-us">
        <div class="map">
          <el-amap :zoom="12" :lang="lang" @click="onMapClick" @mapmove="onMapMoveEnd" class="amap-demo"
            :center="[lng, lat]" ref="myMap" :events="events">
            <el-amap-marker :position="[lng, lat]" vid="0"></el-amap-marker>
          </el-amap>
        </div>
        <div class="contact-us-content">
          <div class="us">
            <div :class="[item.highlight ? 'highlight' : '']" class="us-item" v-for="(item, index) in contactInfoList"
              :key="index">
              <label>
                <i :class="['fa', item.icon]"></i>
              </label>
              <div>
                <b>{{ item.content }}</b>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//https://docs.guyixi.cn/vue-amap vue-amap 文档
import BreadcRumb from '@/components/BreadcRumb.vue';
import ButtomUrl from "@/components/Button/ButtomUrl";
import { lazyAMapApiLoaderInstance } from 'vue-amap';
import * as ContactApi from '@/api/web/contactApi';
import * as homeApi from '@/api/web/homeApi';

export default {
  components: { BreadcRumb, ButtomUrl },
  data () {
    return {
      events: {
        complete: () => {
          this.$refs.myMap.$amap.setFitView()
        },
      },
      companyName: "",
      companyAddress: "",
      contactInfoList: [],
      lng: 0,
      lat: 0,
      lang: localStorage.getItem('lang') || 'zh',
    }
  },
  methods: {
    getContactInfo () {
      ContactApi.getContactInfo()
        .then(res => {
          if (res.code == 200) {
            this.contactInfoList = res.data;
          }
          else if (res.code == 500) {
            console.error(res.exception)
          }
        })
        .catch(err => {
          console.error('接口发生错误')
        });
    },
    onMapMoveEnd () {
      const map = this.$refs.myMap;
      const center = map.getCenter();
      console.log('当前地图中心点经纬度为：', center.lng, center.lat);
    },
    onMapClick () {
      console.log('点击了');
    },
    selectPoi (e) {
      console.log('selectPoi: ', e);
    },
    choosePoi (e) {
      console.log('choosePoi: ', e);
    },
    getMapLatLng () {
      homeApi.getMapLatLng()
        .then(res => {
          if (res.code == 200) {
            this.lat = res.data.lat;
            this.lng = res.data.lng;
          }
        })
    }
  },
  mounted () {
    this.getContactInfo();
    this.getMapLatLng();
  }
}
</script>

<style scoped>
.contact-us {
  display: flex;
  padding: 50px 0px;
}

.contact-us .map {
  width: 50%;
  height: 500px;
}

.contact-us .map .amap-box {
  width: 100%;
}

.contact-us .contact-us-content {
  background: #806e22;
}

.contact-us-content {
  flex: 1;
  display: flex;
  align-items: center;
}

.us {
  padding: 50px;
  box-sizing: border-box;
  color: #D3D3D3;
  font-size: 14px;
}

.us p {
  margin: 5px 0px;
}

.us-item {
  display: flex;
  margin: 10px 0px;
  align-items: center;
}

.us-item label {
  width: 50px;
  text-align: center;
  margin-right: 10px;
  font-size: 22px;
}

.us-item div {
  flex: 1;

}

.highlight {
  font-size: 16px;
  color: #fff;
}
</style>